<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script charset='utf-8' type='text/javascript' src='jquery-3.4.1.min.js'></script>
    <script src="qrcode.js" type="text/javascript"></script>

</head>
<body>
<h1>输入URL以生成二维码</h1>
<div>
    <label for="qr_link">URL:</label>
    <input id="qr_link" type="text" value="hello er wei ma !!" style="width:460px;"/>
    <input type="button" id="qr_creat" value="生成">
    <p>生成的二维码可以通过手机任意扫描工具，查看其二维码信息</p>
    <br/>
</div>
<br>
<div id="qr_container" style="margin:auto; position:relative;"></div>

<script type="text/javascript">
    //点击生成按钮以后
    document.getElementById("qr_creat").onclick = function() {
        var qrcode = new QRCode(        //实例化生成二维码
            document.getElementById("qr_container"), {//二维码存放的div
                width: 160, //设置宽高
                height: 160,
            }

        );

        //根据input框的值生成二维码
        qrcode.makeCode($('#qr_link').val());
        $("#qr_container").append("<br><br>");   //换行
    }
</script>


</body>
</html>